<template>
	<section>
		<div class="border-box">
			<div class="surprise-coupon-contain bgf5f5f5 pb30rem" v-cloak>
				<div class="mb30rem">
					<scroll-navbar :channels="channels" v-model="selected" key-name="name"  key-id="id"></scroll-navbar>
				</div>	
				<ul class="coupon-list pl30rem pr30rem " v-if='flag'>
					<!-- 待使用 -->
					<li 
						class="coupon-item flex-left bg-white mb30rem" 
						v-if=" selected == '0' "						
						v-for="item in surprise_list"
					>
						<div class="coupon-left flexcenter">
							<span class="white fs40rem">惊喜券</span>
						</div>
						<div class="coupon-center pt20rem pb10rem pl30rem pr30rem fs28rem">
							<div class="bold coupon-info ellipsis-more" style="">
								恭喜您获得&nbsp;{{item.goods_name}}&nbsp;商品惊喜券
							</div>
							<span class="c999 fs20rem">
								{{item.expire_start,'yyyy.MM.dd' | formatDate}}
								-
								{{item.expire_end,  'yyyy.MM.dd' | formatDate}}
							</span>
						</div>						
					</li>
					<!-- 已使用 / 已过期  -->
					<li 
						class="coupon-item stale-use layout bg-white mb30rem pr20rem" 
						v-if=" selected == '1'"						
						v-for="item in surprise_list"
					>
						<div class="coupon-left flexcenter coupon-gray">
							<span class="white fs40rem">惊喜券</span>
						</div>
						<div class="coupon-center  pt20rem pr40rem pb10rem fs28rem"
							:class="{ 'used-img': selected == '1'}"
						>
							<div class="bold coupon-info ellipsis-more">
								恭喜您获得&nbsp;{{item.goods_name}}&nbsp;商品惊喜券
							</div>
							<div class="layout">
								<span class="c999 fs20rem">
									{{item.expire_start,'yyyy.MM.dd' | formatDate}}
									-
									{{item.expire_end,  'yyyy.MM.dd' | formatDate}}
								</span>
							</div>
						</div>				
					</li>
					<li 
						class="coupon-item stale-use layout bg-white mb30rem pr20rem" 
						v-if=" selected == '2'"						
						v-for="item in surprise_list"
					>
						<div class="coupon-left flexcenter coupon-gray">
							<span class="white fs40rem">惊喜券</span>
						</div>
						<div class="coupon-center  pt20rem pr40rem pb10rem fs28rem"
							:class="{ 'stale-img': selected == '2'}"
						>
							<div class="bold coupon-info ellipsis-more">
								恭喜您获得&nbsp;{{item.goods_name}}&nbsp;商品惊喜券
							</div>
							<div class="layout">
								<span class="c999 fs20rem">
									{{item.expire_start,'yyyy.MM.dd' | formatDate}}
									-
									{{item.expire_end,  'yyyy.MM.dd' | formatDate}}
								</span>
							</div>
						</div>				
					</li>
				</ul>
				<template v-else>
					<default :imgUrl="img" explain='您还没有惊喜券'></default>
				</template>
			</div>
		</div>				
	</section>
</template>

<script>
	import { surpriseVoucher } from '@/api/ordering';
	import { formatDate } from '@/utils/index';
	import Default from "@/components/Default";
	import ScrollNavbar from '@/components/Scroll-navbar';

	export default {
		components: {
			ScrollNavbar,
			Default
		},
		data() {
			return{
				selected      : '0',
				uid           : localStorage.getItem('uid'),
				surprise_list : [],
				flag          : false,
				img           : require('../../../assets/icon-coupon.png'),
				channels: 
				[ 
					{ id: '0', name: '待使用'},
					{ id: '1', name: '已使用'},
					{ id: '2', name: '已过期'}
				],
			}
		},
		methods:
		{
			loadData()
			{
				surpriseVoucher(this.uid, this.selected).then( res=> {
					if(res.data.length > 0){
						this.surprise_list = res.data;
						console.log(this.surprise_list)
						this.flag = true;
					}
					else
						this.flag = false;
				});
			}
		},	
		watch:{
			selected(val){
				this.loadData();
			}
		},		
		filters:{
			formatDate(time,fmt){
				time *= 1000;
				let date = new Date(time);
				return formatDate(date,fmt);
			}
		},
		created()
		{
			this.loadData();
		}	
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;
		.surprise-coupon-contain{
			min-height: 100vh;
			#scroll-navbar{
				.mint-navbar{
					width: 100%;
				}
			}
			.coupon-list{
				.coupon-item{
					height: 200/28rem;
					overflow-y: hidden;
					.coupon-left{
						width: 160/28rem;
						height: 200/28rem;
						background-image: url('../../../assets/member/coupon-left-bg.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						span{
							display: inline-block;
							width: 36/28rem;
						}					
					}
					.coupon-gray{
						background-image: url(../../../assets/member/coupon-old.png);
					}
					.coupon-center{
						width: 18.5rem;
						.coupon-info{
							height: 94/28rem;
							border-bottom: 1px dashed #e5e5e5;
							margin-bottom: 25/28rem;
							overflow: hidden;
							line-height: 1.5;
						}
						.now-use-button{
							padding: 10/28rem 20/28rem;
							border-radius: 50px;
							background-color: #ff0036;
							border-color: #ff0036;
						}
					}
					.coupon-right{
						width: 65/28rem;
						border-left: 1px solid #e5e5e5;
					}
				}
				.coupon-item:nth-last-of-type(1){
					margin-bottom: 0;
				}
				.stale-use{
					.coupon-center{
						width: 17.2rem;
						background-size: 30%;
						background-repeat: no-repeat;
						background-position: right bottom ;
					}
					.stale-img{
						background-image: url("../../../assets/member/stale_img.png");
					}
					.used-img{
						background-image: url("../../../assets/member/used_img.png");
					}
				}
			}
		}	
		
	}
	.bgf5f5f5{
		background-color: #f5f5f5;
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

